<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Delete, Edit, Plus, Minus, Message, Bell, Goods, Document } from '@element-plus/icons-vue'

// 路由实例
const router = useRouter()

// 当前选中的菜单项
const activeMenu = ref('products')

// 处理菜单选择
const handleMenuSelect = (index) => {
  activeMenu.value = index
}

// 商品管理数据 - 鞋类商品
const productData = ref([
  { id: 1, name: '耐克Air Jordan 1', price: 1299, stock: 56, status: '在售', image: '/images/shoes/nike-aj1.jpg', category: '篮球鞋', brand: '耐克' },
  { id: 2, name: '阿迪达斯Ultraboost', price: 1199, stock: 42, status: '在售', image: '/images/shoes/adidas-ultraboost.jpg', category: '跑步鞋', brand: '阿迪达斯' },
  { id: 3, name: '安踏KT7', price: 699, stock: 78, status: '在售', image: '/images/shoes/anta-kt7.jpg', category: '篮球鞋', brand: '安踏' },
  { id: 4, name: '李宁韦德之道8', price: 899, stock: 35, status: '在售', image: '/images/shoes/lining-wayofwade8.jpg', category: '篮球鞋', brand: '李宁' },
  { id: 5, name: '彪马Suede Classic', price: 599, stock: 0, status: '缺货', image: '/images/shoes/puma-suede.jpg', category: '休闲鞋', brand: '彪马' }
])

// 订单管理数据
const orderData = ref([
  { id: 'ORD20230501001', customer: '张三', products: '耐克Air Jordan 1 x 1', total: 1299, status: '待发货', createTime: '2023-05-01 14:30:22', payTime: '2023-05-01 14:35:10' },
  { id: 'ORD20230502002', customer: '李四', products: '阿迪达斯Ultraboost x 2', total: 2398, status: '已发货', createTime: '2023-05-02 10:15:36', payTime: '2023-05-02 10:20:45' },
  { id: 'ORD20230503003', customer: '王五', products: '安踏KT7 x 1, 李宁韦德之道8 x 1', total: 1598, status: '已完成', createTime: '2023-05-03 16:42:18', payTime: '2023-05-03 16:50:22' },
  { id: 'ORD20230504004', customer: '赵六', products: '彪马Suede Classic x 1', total: 599, status: '已取消', createTime: '2023-05-04 09:05:33', payTime: '-' }
])

// 用户站内通知数据
const userNotificationData = ref([
  { id: 1, title: '新品上架通知', content: '尊敬的用户，耐克Air Jordan 1新配色已上架，欢迎选购！', status: '未发送', createTime: '2023-05-10 09:30:00', targetUsers: '全部用户' },
  { id: 2, title: '促销活动通知', content: '五一劳动节全场鞋类8折优惠，活动时间5月1日至5月5日', status: '已发送', createTime: '2023-04-28 14:20:00', sendTime: '2023-04-28 15:00:00', targetUsers: '全部用户' },
  { id: 3, title: '订单发货通知', content: '您的订单ORD20230502002已发货，物流单号：SF1234567890', status: '已发送', createTime: '2023-05-02 11:30:00', sendTime: '2023-05-02 11:35:00', targetUsers: '用户ID: 2' },
  { id: 4, title: '会员专属优惠', content: 'VIP会员专享，阿迪达斯Ultraboost额外9折优惠', status: '未发送', createTime: '2023-05-12 10:15:00', targetUsers: 'VIP用户' }
])

// 系统站内信数据
const systemMessageData = ref([
  { id: 1, title: '平台规则更新通知', content: '商家后台管理系统功能升级，新增数据分析模块', status: '已读', createTime: '2023-05-08 10:00:00', readTime: '2023-05-08 10:30:15' },
  { id: 2, title: '商品审核通过', content: '您提交的商品「耐克Air Jordan 1」已审核通过', status: '已读', createTime: '2023-04-25 14:20:00', readTime: '2023-04-25 15:10:22' },
  { id: 3, title: '订单异常提醒', content: '订单ORD20230504004已被用户取消，请及时处理', status: '未读', createTime: '2023-05-04 09:30:00' },
  { id: 4, title: '账户安全提醒', content: '您的账户于2023-05-15 20:30:45在非常用设备登录，如非本人操作，请及时修改密码', status: '未读', createTime: '2023-05-15 20:35:00' }
])

// 添加商品对话框
const addProductDialogVisible = ref(false)
const newProduct = ref({
  name: '',
  price: 0,
  stock: 0,
  category: '',
  brand: '',
  status: '在售'
})

// 打开添加商品对话框
const openAddProductDialog = () => {
  addProductDialogVisible.value = true
}

// 添加商品
const addProduct = () => {
  // 这里应该有表单验证
  // 模拟添加商品
  const id = productData.value.length > 0 ? Math.max(...productData.value.map(item => item.id)) + 1 : 1
  productData.value.push({
    id,
    ...newProduct.value,
    image: '/images/shoes/default.jpg' // 默认图片
  })
  addProductDialogVisible.value = false
  // 重置表单
  newProduct.value = {
    name: '',
    price: 0,
    stock: 0,
    category: '',
    brand: '',
    status: '在售'
  }
}

// 查看订单详情
const orderDetailDialogVisible = ref(false)
const currentOrder = ref(null)

const viewOrderDetail = (order) => {
  currentOrder.value = order
  orderDetailDialogVisible.value = true
}

// 发送用户通知
const sendNotification = (notification) => {
  // 模拟发送通知
  const index = userNotificationData.value.findIndex(item => item.id === notification.id)
  if (index !== -1) {
    userNotificationData.value[index].status = '已发送'
    userNotificationData.value[index].sendTime = new Date().toLocaleString()
  }
}

// 标记系统消息为已读
const markAsRead = (message) => {
  // 模拟标记已读
  const index = systemMessageData.value.findIndex(item => item.id === message.id)
  if (index !== -1) {
    systemMessageData.value[index].status = '已读'
    systemMessageData.value[index].readTime = new Date().toLocaleString()
  }
}
</script>

<template>
  <div class="merchant-view">
    <el-container class="merchant-container">
      <!-- 左侧菜单栏 -->
      <el-aside width="250px" class="menu-aside">
        <div class="menu-header">
          <h2>商家管理</h2>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="merchant-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="products">
            <el-icon><Goods /></el-icon>
            <span>商品管理</span>
          </el-menu-item>
          <el-menu-item index="orders">
            <el-icon><Document /></el-icon>
            <span>订单处理</span>
          </el-menu-item>
          <el-menu-item index="user-notifications">
            <el-icon><Bell /></el-icon>
            <span>用户通知</span>
          </el-menu-item>
          <el-menu-item index="system-messages">
            <el-icon><Message /></el-icon>
            <span>系统消息</span>
          </el-menu-item>
          <el-menu-item index="store">
            <el-icon><icon-menu /></el-icon>
            <span>店铺设置</span>
          </el-menu-item>
          <el-menu-item index="statistics">
            <el-icon><icon-menu /></el-icon>
            <span>销售统计</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <!-- 主内容区域 -->
      <el-main class="merchant-main">
        <!-- 商品管理 - 鞋类 -->
        <div v-if="activeMenu === 'products'" class="content-section">
          <h2>商品管理 - 鞋类</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-input
                placeholder="搜索商品名称、品牌或分类"
                style="width: 300px; margin-right: 10px"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-button type="primary" @click="openAddProductDialog">
                <el-icon><Plus /></el-icon> 添加新商品
              </el-button>
            </div>
            
            <el-table :data="productData" style="width: 100%; margin-top: 20px">
              <el-table-column prop="id" label="ID" width="60" />
              <el-table-column label="商品图片" width="100">
                <template #default="scope">
                  <el-image 
                    style="width: 60px; height: 60px" 
                    :src="scope.row.image"
                    fit="cover"
                    :preview-src-list="[scope.row.image]"
                  >
                    <template #error>
                      <div class="image-placeholder">暂无图片</div>
                    </template>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称" width="180" />
              <el-table-column prop="brand" label="品牌" width="100" />
              <el-table-column prop="category" label="分类" width="100" />
              <el-table-column prop="price" label="价格" width="100">
                <template #default="scope">
                  ¥{{ scope.row.price }}
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="库存" width="80" />
              <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                  <el-tag :type="scope.row.status === '在售' ? 'success' : 'danger'">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button size="small" type="primary">
                    <el-icon><Edit /></el-icon> 编辑
                  </el-button>
                  <el-button size="small" type="danger">
                    <el-icon><Delete /></el-icon> 下架
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                background
                layout="prev, pager, next, sizes"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
          
          <!-- 添加商品对话框 -->
          <el-dialog
            v-model="addProductDialogVisible"
            title="添加新商品"
            width="50%"
          >
            <el-form :model="newProduct" label-width="100px">
              <el-form-item label="商品名称" required>
                <el-input v-model="newProduct.name" placeholder="请输入商品名称" />
              </el-form-item>
              <el-form-item label="品牌" required>
                <el-select v-model="newProduct.brand" placeholder="请选择品牌" style="width: 100%">
                  <el-option label="耐克" value="耐克" />
                  <el-option label="阿迪达斯" value="阿迪达斯" />
                  <el-option label="安踏" value="安踏" />
                  <el-option label="李宁" value="李宁" />
                  <el-option label="彪马" value="彪马" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
              <el-form-item label="分类" required>
                <el-select v-model="newProduct.category" placeholder="请选择分类" style="width: 100%">
                  <el-option label="篮球鞋" value="篮球鞋" />
                  <el-option label="跑步鞋" value="跑步鞋" />
                  <el-option label="休闲鞋" value="休闲鞋" />
                  <el-option label="训练鞋" value="训练鞋" />
                  <el-option label="足球鞋" value="足球鞋" />
                </el-select>
              </el-form-item>
              <el-form-item label="价格" required>
                <el-input-number v-model="newProduct.price" :min="0" :precision="2" style="width: 100%" />
              </el-form-item>
              <el-form-item label="库存" required>
                <el-input-number v-model="newProduct.stock" :min="0" :precision="0" style="width: 100%" />
              </el-form-item>
              <el-form-item label="状态">
                <el-radio-group v-model="newProduct.status">
                  <el-radio label="在售">在售</el-radio>
                  <el-radio label="缺货">缺货</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="商品图片">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
                <div style="color: #909399; font-size: 12px; margin-top: 10px">
                  提示：上传图片大小不超过2MB，支持jpg、png格式
                </div>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="addProductDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addProduct">确认</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
        
        <!-- 订单处理 -->
        <div v-if="activeMenu === 'orders'" class="content-section">
          <h2>订单处理</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-input
                placeholder="搜索订单号或客户名称"
                style="width: 300px; margin-right: 10px"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select placeholder="订单状态" style="width: 150px; margin-right: 10px">
                <el-option label="全部" value="" />
                <el-option label="待发货" value="待发货" />
                <el-option label="已发货" value="已发货" />
                <el-option label="已完成" value="已完成" />
                <el-option label="已取消" value="已取消" />
              </el-select>
              <el-date-picker
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="margin-right: 10px"
              />
              <el-button type="primary">
                <el-icon><Search /></el-icon> 查询
              </el-button>
            </div>
            
            <el-table :data="orderData" style="width: 100%; margin-top: 20px">
              <el-table-column prop="id" label="订单号" width="150" />
              <el-table-column prop="customer" label="客户" width="100" />
              <el-table-column prop="products" label="商品" min-width="200" show-overflow-tooltip />
              <el-table-column prop="total" label="金额" width="100">
                <template #default="scope">
                  ¥{{ scope.row.total }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="{
                    '待发货': 'warning',
                    '已发货': 'primary',
                    '已完成': 'success',
                    '已取消': 'info'
                  }[scope.row.status]">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="160" />
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button size="small" type="primary" @click="viewOrderDetail(scope.row)">
                    查看详情
                  </el-button>
                  <el-button 
                    size="small" 
                    type="success" 
                    v-if="scope.row.status === '待发货'"
                  >
                    发货
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                background
                layout="prev, pager, next, sizes"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
          
          <!-- 订单详情对话框 -->
          <el-dialog
            v-model="orderDetailDialogVisible"
            title="订单详情"
            width="60%"
          >
            <template v-if="currentOrder">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="订单号">{{ currentOrder.id }}</el-descriptions-item>
                <el-descriptions-item label="客户名称">{{ currentOrder.customer }}</el-descriptions-item>
                <el-descriptions-item label="订单状态">{{ currentOrder.status }}</el-descriptions-item>
                <el-descriptions-item label="订单金额">¥{{ currentOrder.total }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ currentOrder.createTime }}</el-descriptions-item>
                <el-descriptions-item label="支付时间">{{ currentOrder.payTime }}</el-descriptions-item>
              </el-descriptions>
              
              <h3 style="margin-top: 20px">商品信息</h3>
              <el-table :data="[{name: currentOrder.products.split(' x ')[0], quantity: currentOrder.products.split(' x ')[1]}]">
                <el-table-column prop="name" label="商品名称" />
                <el-table-column prop="quantity" label="数量" width="100" />
              </el-table>
              
              <h3 style="margin-top: 20px">物流信息</h3>
              <div v-if="currentOrder.status === '已发货' || currentOrder.status === '已完成'">
                <p>物流公司：顺丰速运</p>
                <p>物流单号：SF1234567890</p>
                <p>发货时间：2023-05-02 11:30:00</p>
              </div>
              <div v-else>
                <p>暂无物流信息</p>
              </div>
            </template>
          </el-dialog>
        </div>
        
        <!-- 用户站内通知管理 -->
        <div v-if="activeMenu === 'user-notifications'" class="content-section">
          <h2>用户站内通知管理</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-button type="primary" style="margin-bottom: 20px">
                <el-icon><Plus /></el-icon> 创建新通知
              </el-button>
            </div>
            
            <el-table :data="userNotificationData" style="width: 100%">
              <el-table-column prop="id" label="ID" width="60" />
              <el-table-column prop="title" label="通知标题" width="180" show-overflow-tooltip />
              <el-table-column prop="content" label="通知内容" min-width="250" show-overflow-tooltip />
              <el-table-column prop="targetUsers" label="目标用户" width="120" show-overflow-tooltip />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.status === '已发送' ? 'success' : 'warning'">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="160" />
              <el-table-column prop="sendTime" label="发送时间" width="160" />
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button 
                    size="small" 
                    type="primary" 
                    v-if="scope.row.status === '未发送'"
                    @click="sendNotification(scope.row)"
                  >
                    发送
                  </el-button>
                  <el-button size="small" type="info" v-else disabled>
                    已发送
                  </el-button>
                  <el-button size="small" type="danger">
                    <el-icon><Delete /></el-icon> 删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                background
                layout="prev, pager, next, sizes"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
        </div>
        
        <!-- 系统站内信管理 -->
        <div v-if="activeMenu === 'system-messages'" class="content-section">
          <h2>系统站内信管理</h2>
          <el-card class="content-card">
            <el-table :data="systemMessageData" style="width: 100%">
              <el-table-column prop="id" label="ID" width="60" />
              <el-table-column prop="title" label="消息标题" width="180" show-overflow-tooltip />
              <el-table-column prop="content" label="消息内容" min-width="250" show-overflow-tooltip />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.status === '已读' ? 'info' : 'danger'">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="接收时间" width="160" />
              <el-table-column prop="readTime" label="阅读时间" width="160" />
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-button 
                    size="small" 
                    type="primary" 
                    v-if="scope.row.status === '未读'"
                    @click="markAsRead(scope.row)"
                  >
                    标记已读
                  </el-button>
                  <el-button size="small" type="info" v-else disabled>
                    已读
                  </el-button>
                  <el-button size="small" type="danger">
                    <el-icon><Delete /></el-icon> 删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                background
                layout="prev, pager, next, sizes"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
        </div>
        
        <!-- 店铺设置 -->
        <div v-if="activeMenu === 'store'" class="content-section">
          <h2>店铺设置</h2>
          <el-card class="content-card">
            <p>这里是店铺设置功能区域，可以配置店铺信息和营业参数。</p>
            <!-- 店铺设置功能将在这里实现 -->
          </el-card>
        </div>
        
        <!-- 销售统计 -->
        <div v-if="activeMenu === 'statistics'" class="content-section">
          <h2>销售统计</h2>
          <el-card class="content-card">
            <p>这里是销售统计功能区域，可以查看销售数据和分析报表。</p>
            <!-- 销售统计功能将在这里实现 -->
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.merchant-view {
  height: 100vh;
  background-color: #f5f5f5;
}

.merchant-container {
  height: 100%;
}

.menu-aside {
  background-color: #304156;
  color: #fff;
  height: 100%;
}

.menu-header {
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #1f2d3d;
}

.menu-header h2 {
  color: #fff;
  margin: 0;
  font-size: 20px;
}

.merchant-menu {
  border-right: none;
  background-color: #304156;
}

.merchant-menu :deep(.el-menu-item) {
  color: #bfcbd9;
}

.merchant-menu :deep(.el-menu-item.is-active) {
  color: #409EFF;
  background-color: #263445;
}

.merchant-menu :deep(.el-menu-item:hover) {
  background-color: #263445;
}

.merchant-main {
  padding: 20px;
  background-color: #f5f5f5;
}

.content-section {
  margin-bottom: 20px;
}

.content-section h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 22px;
  color: #333;
}

.content-card {
  margin-bottom: 20px;
}

.toolbar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 12px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>